<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
export default defineComponent({
  name: "SectionThree",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      data_1: 25,
      data_2: 12,
      data_3: 7,
      // 换热站数据
      listData: [],
      // 供热站数据
      listData_: [],
    }
  },
  mounted() {
    this.init();
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    init() {
      this.listData = [
        {
          name: "海能达热力北部供热站",
          date: "2024-12-12 09:23",
          type: "设备故障",
          number: 42571,
        },
        {
          name: "紫城御都",
          date: "2024-12-01 14:56",
          type: "系统异常",
          number: 863,
        }
      ]
    }
  }
});
</script>
<template>
  <div class="section-three">
    <GlobalCard :mainTitle="'故障列表'">
      <template #body>
        <!-- 代码 -->
        <div id="Yunxingjiance">
          <el-table class="self-table" :data="listData" show-overflow-tooltip style="width: 100%; padding-right: 10px"
            height="100%" header-row-class-name="main-table-header">
            <el-table-column type="index" label="序号" width="30" align='center' />
            <el-table-column prop="name" label="故障点名称" align='center' />
            <el-table-column prop="date" label="故障时间" align='center' />
            <el-table-column prop="type" label="故障类型" align='center' />
            <el-table-column prop="number" label="影响户数" align='center' />
          </el-table>

        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style>
.el-table.self-table {
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
  padding-right: 0 !important;
}

.el-table.self-table .el-table__cell {
  padding: 5px 0;
}

.el-table.self-table .el-table__header .cell {
  color: #0bf9fe;
  font-weight: 100;
  padding: 0;
  text-align: center;
  font-size: 12px;
  font-family: "FANGZHENG-BLACK" !important;
}

.el-table.self-table th.el-table__cell {
  background-color: rgba(21, 77, 160, 0.2);
}

.el-table.self-table tr {
  background-color: transparent;
}

.el-table.self-table.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: transparent;
}

.el-table.self-table.el-table--enable-row-hover .el-table__body tr:hover {
  background-image: linear-gradient(270deg,
      rgba(26, 123, 230, 0) 0%,
      rgba(69, 193, 255, 0.9) 100%);
}

.el-table.self-table.el-table--enable-row-transition .el-table__body td.el-table__cell {
  border-bottom: none;
}

.el-table.self-table.el-table--fit .el-table__inner-wrapper:before {
  display: none;
}

.el-table.self-table td.el-table__cell,
.el-table.self-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

.main-search .el-input__wrapper {
  background-color: rgba(4, 87, 177, 0.2);
  box-shadow: 0 0 0 1px #1d68be inset;
}

.main-search .el-input__inner {
  color: #fff;
}

.self-popover.el-popper.is-light,
.self-popover.el-popper.is-light>.el-popper__arrow:before {
  background-color: rgba(0, 24, 50, 0.9);
  border: 1px solid #1d68be;
}

.self-popover.el-popover.el-popper {
  color: #fff;
}

.content.real-date .el-range-editor.el-input__wrapper {
  box-shadow: none;
}

.content.real-date .el-date-editor .el-range-input {
  color: #fff;
}

:root {
  //--el-bg-color-overlay: rgba(0, 0, 0, 0);
}

.self-date-picker.el-popper {
  border: 1px solid #1d68be;
}

.self-date-picker .el-date-range-picker {
  background-color: rgba(0, 24, 50, 0.9);
}

.self-date-picker .el-date-range-picker {
  --el-datepicker-inner-border-color: rgba(0, 0, 0, 0);
}

.real-date .el-input__wrapper {
  background-color: rgba(4, 87, 177, 0.2);
}

.self-date-picker .el-date-table td.in-range .el-date-table-cell {
  background-color: rgba(22, 112, 247, 0.3);
}

.self-date-picker .el-picker-panel {
  color: #fff;
}
</style>
<style scoped lang="less">
.near-normal {
  color: #f93030;

  &.is-near-date {
    color: #02ff7f;
  }
}

.section-three {
  position: fixed;
  top: 70rem;
  //left: 2rem;
  right: 44rem;
}

#Yunxingjiance {
  width: 100%;
  height: 31rem;
  overflow-y: auto;
}
</style>